<template>
	<!--pages/extend/index.wxml-->
	<view>
		<cu-custom :bgColor="'bg-' + theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">新增发票</block>
		</cu-custom>
		<view>
			<view class="form">
				<view class="flex-view">
					<text>类型</text>
					<div class="tab-btn">
						<text @tap="changeType" data-type="1" :class="type == 1 ? 'select-color' : ''">单位</text>
						<text @tap="changeType" data-type="2" class="ml16"
							:class="type == 2 ? 'select-color' : ''">个人</text>
					</div>
				</view>
				<view class="flex-view">
					<text>抬头</text>
					<input v-model="rise" bindinput="setRise" placeholder="请填写准确的抬头名称" />
				</view>
				<view class="flex-view">
					<text>邮箱</text>
					<input v-model="email" bindinput="setRise" placeholder="请填写准确的邮箱地址" />
				</view>
				<view class="flex-view">
					<text>手机号</text>
					<input v-model="phone" bindinput="setRise" placeholder="请填写准确的手机号" />
				</view>
				<view class="flex-view" v-if="type == 1">
					<text>税号</text>
					<input v-model="tax" bindinput="setTax" placeholder="请填写「税号」或「社会信用代码」" />
				</view>
				<!-- <view class="flex-view">
				<text>类型</text>
				<text @tap="changeType" data-type='1' :class="type == 1 ? 'select-color':''">单位</text>
				<text @tap="changeType" data-type="2" :class="type == 2 ? 'select-color':''">个人</text>
			</view>
			<view class="flex-view">
				<text>抬头</text>
				<input v-model="rise" bindinput="setRise" placeholder="请填写准确的抬头名称" />
			</view>
			<view v-if="type == 1">
				<view style="margin-top:0;" class="flex-view">
					<text>税号</text>
					<input v-model="tax" bindinput="setTax" placeholder="请填写「税号」或「社会信用代码」" />
				</view>
				<view class="invoice-pic">可咨询公司财务部门获得「税号」或「社会信用代码」信息</view>
			</view> -->
			</view>
			<view class="tips f24">可咨询公司财务部门获得「税号」或「社会信用代码」信息</view>

			<view class="compile">
				<!-- #ifdef MP-WEIXIN -->
				<button hover-class="none" class="btn wx" @tap="getWxInvoiceTitle">
					选择微信发票抬头
				</button>
				<!-- #endif -->
				<button @tap="addInvoice" hover-class="none" class="btn save" :class="'bg-'+theme.backgroundColor"
					:loading="loading ? true : false">
					保存
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import api from "utils/api";
	export default {
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				type: 1, //1单位，2个人
				rise: "",
				tax: "",
				userId: "",
				index: "",
				id: "",
				email: '',
				phone: ''
			};
		},
		onLoad(options) {
			if (options.index == 1) {
				api.deltailInvoice(options.id).then((res) => {
					this.id = options.id;
					this.index = options.index;
					this.rise = res.data.rise;
					this.tax = res.data.tax;
					this.type = res.data.type;
					this.email = res.data.email;
					this.phone = res.data.phone;
				});
			}
		},
		mounted() {
			uni.getStorage({
				//获取用户信息
				key: "user_info",
				success: (res) => {
					this.userId = res.data.id;
				},
			});
		},
		methods: {
			changeType(e) {
				//切换
				this.type = e.target.dataset.type;
			},
			getWxInvoiceTitle() {
				let _this = this;
				wx.chooseInvoiceTitle({
					success(res) {
						_this.type = res.type == "0" ? "1" : "2";
						_this.rise = res.title;
						_this.tax = res.taxNumber;
					},
					fail(err) {},
				});
			},
			showToast(title) {
				uni.showToast({
					title: title,
					duration: 2000,
					icon: "none",
				});
			},
			addInvoice() {
				if (this.index == 1) {
					//修改
					if (this.type == 1) {
						if (!this.rise) return this.showToast("请填写抬头");
						if (!this.tax) return this.showToast("请填写税号或社会信用代码");
						// if (!this.phone) return this.showToast("请填写电话话吗");
						// if (!this.email) return this.showToast("请填写邮箱地址");
						api
							.putInvoice({
								id: this.id,
								userId: this.userId,
								type: 1,
								rise: this.rise,
								tax: this.tax,
								email: this.email || '',
								phone: this.phone || ''
							})
							.then((res) => {
								if (res.code == 0) {
									uni.showToast({
										title: "修改成功",
										duration: 2000,
										icon: "none",
									});
									uni.$emit("invoice", "1");
									uni.navigateBack({
										delta: 1,
									});
								}
							});
					} else {
						if (!this.rise) return this.showToast("请填写抬头");
						// if (!this.phone) return this.showToast("请填写电话号码");
						// if (!this.email) return this.showToast("请填写邮箱地址");
						api
							.putInvoice({
								id: this.id,
								userId: this.userId,
								type: 2,
								rise: this.rise,
								email: this.email || '',
								phone: this.phone || '',
							})
							.then((res) => {
								if (res.code == 0) {
									uni.showToast({
										title: "修改成功",
										duration: 2000,
										icon: "none",
									});
									uni.$emit("invoice", "1");
									uni.navigateBack({
										delta: 1,
									});
								}
							});
					}
				} else {
					//保存
					if (this.type == 1) {
						if (!this.rise) return this.showToast("请填写抬头");
						if (!this.tax) return this.showToast("请填写税号或社会信用代码");
						api
							.addInvoice({
								userId: this.userId,
								type: 1,
								rise: this.rise,
								tax: this.tax,
								email: this.email || '',
								phone: this.phone || ''
							})
							.then((res) => {
								if (res.code == 0) {
									uni.showToast({
										title: "保存成功",
										duration: 2000,
										icon: "none",
									});
									uni.$emit("invoice", "1");
									uni.navigateBack({
										delta: 1,
									});
								}
							});
					} else {
						if (!this.rise) return this.showToast("请填写抬头");
						api
							.addInvoice({
								userId: this.userId,
								type: 2,
								rise: this.rise,
								email: this.email || '',
								phone: this.phone || ''
							})
							.then((res) => {
								if (res.code == 0) {
									uni.showToast({
										title: "保存成功",
										duration: 2000,
										icon: "none",
									});
									uni.$emit("invoice", "1");
									uni.navigateBack({
										delta: 1,
									});
								}
							});
					}
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	.tips {
		margin-left: 32rpx;
		color: #F55F4E;
	}

	.form {
		margin: 32rpx;
		background-color: #fff;
		padding: 32rpx;
		border-radius: 16rpx;

		.flex-view {
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #f4f4f4;
			padding: 32rpx;
			font-size: 30rpx;
			justify-content: space-between;

			.tab-btn {
				width: 75%;

				text {
					background: #ffffff;
					border: 2rpx solid #00000025;
					border-radius: 40rpx;
					padding: 10rpx 32rpx;
					color: #00000065;
				}

				.select-color {
					border: 2rpx solid #406cff;
					color: #406cff;
				}
			}

			&:last-child {
				border-bottom: none;
			}

			input {
				width: 75%;
			}
		}
	}

	.compile {
		position: fixed;
		width: 100%;
		position: absolute;
		bottom: 0;
		margin-bottom: 32rpx;
		display: flex;
		align-items: center;

		.btn {
			width: 46%;
			border-radius: 60rpx;
			font-size: 28rpx;
		}

		.wx {
			background-color: transparent;
			border: 1rpx solid #00000025;
		}

		.save {
			color: #fff;
		}
	}
</style>